<template>
  <div class="selfAside_module">
    <el-aside :width="asideWidth">
      <el-scrollbar>
        <el-menu
          background-color="#333"
          text-color="#409EFF"
          active-text-color="#409EFF"
          :default-active="currentIndex"
        >
          <template v-for="item in menuData">
            <!-- 判断是否有子菜单 -->
            <el-sub-menu
              v-if="item.children && item.children.length > 0"
              :index="item.path"
              :key="item.path"
            >
              <template #title>
                <span>{{ item.title }}</span>
              </template>
              <!-- 递归渲染子菜单 -->
              <template v-for="(subItem, subIndex) in item.children">
                <!-- 子菜单中如果还有子菜单，继续嵌套 el-submenu -->
                <el-sub-menu
                  v-if="subItem.children"
                  :key="subIndex"
                  :index="subItem.name"
                  
                >
                  <template #title>
                    <span>{{ subItem.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="(subSubItem, subSubIndex) in subItem.children"
                    :key="subSubIndex"
                    :index="subSubItem.path"
                    @click="handleClick(subSubItem)"
                  >
                    <span>{{ subSubItem.title }}</span>
                  </el-menu-item>
                </el-sub-menu>

                 <!-- 如果子菜单没有子菜单了，使用 el-menu-item 展示 -->
                  <el-menu-item v-else :key="subItem.path" :index="subItem.name" @click="handleClick(subItem)">
                    <span>{{ subItem.title }}</span>
                  </el-menu-item>

              </template>
            </el-sub-menu>
            <el-menu-item
              v-else
              :index="item.path"
              :key="item.path"
              @click="handleClick(item)"
            >
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MenuData, MenuItem } from "../../viewModel/aside";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "MenuItem",
  props: {
    menuData: {
      type: Array as PropType<MenuData[]>,
      required: true,
    },
    currentIndex: {
      type: String,
    },
    asideWidth: {
      type: String,
      default: () => "200px",
    },
  },
  setup(props, { emit }) {
    const router = useRouter();
    const handleClick = (payload: MenuItem) => {
      router.push(`/baseLayout/${payload.path}`);
      emit("asideClick", payload);
    };
    return {
      handleClick,
    };
  },
});
</script>
<style>
.selfAside_module {
  width: 100%;
}

.selfAside_module .el-aside,.el-sub-menu {
  background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item,
.selfAside_module .el-sub-menu__title {
  color: #fff;
  background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item:hover {
  background: #333;
}
.el-submenu__title:focus,
.el-submenu__title:hover {
  background: blue;
}
.selfAside_module .el-menu-item.is-active {
  color: #409eff;
  background: #333;
}
</style>
<style scoped></style>
